import './App.css';
import './index.css';
import Search from './components/search'
import Sidebar from './components/sidebar'
import Fengmian from './components/fengmian'
import Comment from './components/comment'
import AudioPlayer from './components/audioPlayer'
import React, { Component } from 'react';

class App extends Component {

  state={queryname:"",songList:[],music_url:"",commentList:[],pic_url:""}

  testSearch = (query,List)=>{
    this.setState({queryname:query,songList:List})
  }
  music_url = (music_url)=>{
    this.setState({music_url})
  }
  set_comment=(commentList)=>{
    this.setState({commentList})
  }
  pic_url=(pic_url)=>{
    this.setState({pic_url})
  }

  render() {
    const {songList} = this.state
    return (
      <div>
        <Search testSearch={this.testSearch}/>
        <div className="container">
          <Sidebar songList={songList} music_url={this.music_url} set_comment={this.set_comment} pic_url={this.pic_url}/>
          <Fengmian music_url={this.state.music_url} pic_url={this.state.pic_url}/>
          <Comment commentList={this.state.commentList}/>
        </div>
        <div>
          <AudioPlayer />
        </div>
      </div >
    )
  }
}

export default App;
